<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 左侧二维码登录 -->
      <div class="qr-login">
        <div class="qr-title">扫描二维码登录</div>
        <div class="qr-code">
          <el-image :src="qrCodeUrl" fit="cover" style="width: 160px; height: 160px" />
        </div>
        <div class="qr-tip">请使用微信扫码登录</div>
      </div>

      <!-- 中间分隔线 -->
      <div class="divider"></div>

      <!-- 右侧账号密码登录 -->
      <div class="form-login">
        <!-- 登录方式切换 -->
        <div class="login-tabs">
          <div
            :class="['tab-item', activeTab === 'password' ? 'active' : '']"
            @click="activeTab = 'password'"
          >
            密码登录
          </div>
          <div
            :class="['tab-item', activeTab === 'sms' ? 'active' : '']"
            @click="activeTab = 'sms'"
          >
            短信登录
          </div>
        </div>

        <!-- 密码登录表单 -->
        <div v-if="activeTab === 'password'" class="password-form" label-width="auto">
          <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef">
            <el-form-item prop="username">
              <el-input
                v-model="passwordForm.username"
                placeholder="请输入手机号/账号"
                @keyup.enter="handlePasswordLogin"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="passwordForm.password"
                placeholder="请输入密码"
                type="password"
                show-password
                @keyup.enter="handlePasswordLogin"
                style="flex: 7"
              />
              <el-link type="primary" :underline="false" style="flex: 2">忘记密码?</el-link>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="login-btn" @click="handlePasswordLogin">
                登录
              </el-button>
              <el-button class="register-btn"> 注册</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 短信登录表单 -->
        <!--        <div v-if="activeTab === 'sms'" class="sms-form">-->
        <!--          <el-form :model="smsForm" :rules="smsRules" ref="smsFormRef">-->
        <!--            <el-form-item prop="phone">-->
        <!--              <el-input v-model="smsForm.phone" placeholder="请输入手机号" :prefix-icon="Iphone" />-->
        <!--            </el-form-item>-->
        <!--            <el-form-item prop="code">-->
        <!--              <div class="code-input" style="width: 100%">-->
        <!--                <el-input-->
        <!--                  v-model="smsForm.code"-->
        <!--                  placeholder="请输入验证码"-->
        <!--                  :prefix-icon="Message"-->
        <!--                  style="flex: 7"-->
        <!--                />-->
        <!--                <el-button-->
        <!--                  type="primary"-->
        <!--                  :disabled="countdown > 0"-->
        <!--                  @click="sendSmsCode"-->
        <!--                  style="flex: 1"-->
        <!--                >-->
        <!--                  {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}-->
        <!--                </el-button>-->
        <!--              </div>-->
        <!--            </el-form-item>-->
        <!--            <el-form-item>-->
        <!--              <el-button type="primary" class="sms-login-btn" @click="handleSmsLogin">-->
        <!--                登录/注册-->
        <!--              </el-button>-->
        <!--            </el-form-item>-->
        <!--          </el-form>-->
        <!--        </div>-->

        <!-- 其他登录方式 -->
        <!--        <div class="other-login">-->
        <!--          <div class="other-title">其他方式登录</div>-->
        <!--          <div class="login-icons">-->
        <!--            <el-icon class="icon-item">-->
        <!--              <ChatDotRound />-->
        <!--            </el-icon>-->
        <!--            <span class="other-title-item">微信</span>-->
        <!--            <el-icon class="icon-item" @click="handleWeiboLogin">-->
        <!--              <Platform />-->
        <!--            </el-icon>-->
        <!--            <span class="other-title-item">微博</span>-->
        <!--            <el-icon class="icon-item" @click="handleQQLogin">-->
        <!--              <Connection />-->
        <!--            </el-icon>-->
        <!--            <span class="other-title-item">QQ</span>-->
        <!--          </div>-->
        <!--        </div>-->
        <!-- 底部提示 -->
        <div class="login-tip">
          未注册过的手机号，我们将自动帮你注册账号<br />
          登录或完成注册即代表你同意
          <el-link type="primary" :underline="false">用户协议</el-link>
          和
          <el-link type="primary" :underline="false">隐私政策</el-link>
        </div>
      </div>
    </div>
    <!-- 注册对话框 -->
    <!--    <el-dialog v-model="showRegisterDialog" title="注册" width="30%">-->
    <!--      <el-form-->
    <!--        :model="registerForm"-->
    <!--        :rules="registerRules"-->
    <!--        ref="registerFormRef"-->
    <!--        label-width="auto"-->
    <!--      >-->
    <!--        <el-form-item label="用户名" prop="username">-->
    <!--          <el-input v-model="registerForm.username" placeholder="请输入用户名" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="手机号" prop="phone">-->
    <!--          <el-input v-model="registerForm.phone" placeholder="请输入手机号" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="密码" prop="password">-->
    <!--          <el-input-->
    <!--            v-model="registerForm.password"-->
    <!--            type="password"-->
    <!--            placeholder="请输入密码"-->
    <!--            show-password-->
    <!--          />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="确认密码" prop="confirmPassword">-->
    <!--          <el-input-->
    <!--            v-model="registerForm.confirmPassword"-->
    <!--            type="password"-->
    <!--            placeholder="请再次输入密码"-->
    <!--            show-password-->
    <!--          />-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <template #footer>-->
    <!--        <el-button @click="showRegisterDialog = false">取消</el-button>-->
    <!--        <el-button type="primary" @click="handleRegister">注册</el-button>-->
    <!--      </template>-->
    <!--    </el-dialog>-->
  </div>
</template>

<script setup lang="js">
  import { ref, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { userLoginService } from '@/api/user.js'
  import { useUserStore } from '@/store/customIndex.js'
  const userStore = useUserStore()

  const activeTab = ref('password')
  // 二维码图片URL
  const qrCodeUrl = ref('https://file.elskjds.com:9000/xyz/xyz-wx.jpg')
  // 密码登录表单
  const passwordForm = reactive({
    username: 'admin',
    password: '123456'
  })
  const passwordFormRef = ref(null)
  const passwordRules = reactive({
    username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
  })
  const router = useRouter()
  // 密码登录
  const handlePasswordLogin = () => {
    passwordFormRef.value.validate(async (valid) => {
      if (valid) {
        // 这里写你的登录逻辑，比如调用接口
        console.log('开始进行登录')
        const res = await userLoginService(passwordForm)
        if (res.token) {
          userStore.setToken(res.token)
          console.log(userStore.token)
          userStore.setUser(res.user.user)
          ElMessage.success('登录成功')
          router.push('/dashboard/console')
        }
      } else {
        // 校验不通过时的处理
        console.log('表单校验未通过')
      }
    })
  }
</script>

<style lang="scss" scoped>
  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
  }

  .login-box {
    display: flex;
    width: 800px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .qr-login {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .qr-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
  }

  .qr-code {
    width: 160px;
    height: 160px;
    margin-bottom: 20px;
    border: 1px solid #eee;
  }

  .qr-tip {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-top: 20px;
  }

  .divider {
    width: 1px;
    background-color: #eee;
    margin: 20px 0;
  }

  .form-login {
    flex: 1.5;
    padding: 40px;
  }

  .login-tabs {
    display: flex;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
  }

  .tab-item {
    padding: 10px 20px;
    cursor: pointer;
    color: #666;
  }

  .tab-item.active {
    color: #00a1d6;
    border-bottom: 2px solid #00a1d6;
  }

  .forget-password {
    text-align: right;
    margin-bottom: 20px;
  }

  .login-btn {
    width: 48%;
    float: left;
  }

  .register-btn {
    width: 48%;
    float: right;
  }

  .sms-login-btn {
    width: 100%;
  }

  .code-input {
    display: flex;
    gap: 10px;
  }

  .code-input .el-button {
    width: 120px;
  }

  .other-login {
    margin-top: 40px;
    text-align: center;
  }

  .other-title {
    color: #999;
    font-size: 14px;
    margin-bottom: 15px;
    position: relative;
  }

  .other-title::before,
  .other-title::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background-color: #eee;
  }

  .other-title::before {
    left: 0;
  }

  .other-title::after {
    right: 0;
  }

  .login-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
  }

  .other-title-item {
    font-size: 12px;
    float: left;
    margin-left: -15px;
    margin-top: 3px;
    color: #999;
  }

  .icon-item {
    font-size: 24px;
    color: #999;
    cursor: pointer;
  }

  .icon-item:hover {
    color: #00a1d6;
  }

  .login-tip {
    margin-top: 30px;
    font-size: 12px;
    color: #999;
    text-align: center;
    line-height: 1.6;
  }

  .login-tip .el-link {
    font-size: 12px;
  }
</style>
